import { EditDetail } from '../../../api/yjr/yjr_api'
import { useParams } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import { getAddr, postUpdate, getAddrDel } from '../../../api/yjr/yjr_api'
import { LocationFill } from 'antd-mobile-icons'
import { Button } from 'antd-mobile'
import '../style/edit.css'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'

interface Form {
    id?: string
    name: string,
    phone: string,
    addr: string,
    title: string,
    detail_addr: string,
}

export default React.memo(function Edit() {

    useEffect(() => {
        const integralShop = sessionStorage.getItem('integralShop')
        if (integralShop) {
            if ((JSON.parse(integralShop).flag) === true) {
                sessionStorage.setItem('integralShop', JSON.stringify({ flag: false }))
                window.location.reload()
            }
        } else {
            sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        }
    }, [])

    const [form, setForm] = useState<Form>({ id: '', name: '', phone: '', addr: '', title: '', detail_addr: '' })
    const [addr, setAddr] = useState<any>([])
    const [num, setNum] = useState(0)
    const navigate = useNavigate()
    const addrList = async () => {
        const res = await getAddr()
        if (res.data.code == 200) {
            setAddr(res.data.placeData);
        }
    }

    const handleXuan = (id: any) => {
        setNum(id)
        setForm({ ...form, title: id })
    }

    const { id } = useParams()

    const getDetailData = async () => {
        const res = await EditDetail({ id: id })
        setForm(
            {
                ...form,
                id: id,
                name: res.data.detail.name,
                phone: res.data.detail.phone,
                addr: res.data.detail.addr,
                title: res.data.detail.title,
                detail_addr: res.data.detail.detail_addr
            }
        )
        setNum(res.data.detail.title)
    }

    const edit = async () => {
        const res = await postUpdate(form)
        if (res.data.code == 200) {
            navigate('/delivery_address')
        }
    }

    const addrDel = async () => {
        const res = await getAddrDel({ id })
        if (res.data.code == 200) {
            navigate('/delivery_address')
        }
    }


    const back = () => {
        window.history.back()
        sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
    }


    const handleMap = () => {
        navigate('/yzfmap')
    }

    useEffect(() => {
        getDetailData()
    }, [])

    useEffect(() => {
        addrList()
    }, [])

    return (
        <div>
            <div className="edit-header">
                <NavBar onBack={back}>
                    地址修或删
                </NavBar>
            </div>
            <div className='inp'>
                <p>联系人</p>
                <input
                    type="text"
                    className='text'
                    placeholder='请输入联系人姓名'
                    value={form.name}
                    onChange={(e) => {
                        setForm({
                            ...form,
                            name: e.target.value
                        })
                    }}
                />
            </div>

            <div className='inp'>
                <p>手机号</p>
                <input
                    type="text"
                    className='text'
                    placeholder='请输入联系人手机号'
                    value={form.phone}
                    onChange={(e) => {
                        setForm({
                            ...form,
                            phone: e.target.value
                        })
                    }}
                />
            </div>

            <div className='inp'>
                <p>地址</p>
                <div className='input'>
                    <input
                        type="text"
                        className='text textInp'
                        placeholder='请选择地址'
                        value={form.addr}
                        onChange={(e) => {
                            setForm({
                                ...form,
                                addr: e.target.value
                            })
                        }}
                    />
                    <p><LocationFill className='location' onClick={handleMap} /></p>
                </div>
            </div>

            <div className='inp'>
                <p>楼号门牌</p>
                <input
                    type="text"
                    className='text'
                    placeholder='如: 16号楼1601'
                    value={form.detail_addr}
                    onChange={(e) => {
                        setForm({
                            ...form,
                            detail_addr: e.target.value
                        })
                    }}
                />
            </div>

            <div className='xuan'>
                <p style={{ marginLeft: '1rem', lineHeight: '3.5rem' }}>地址标签</p>
                <div className='addr'>
                    {
                        addr.map((item: any, index: number) => {
                            return (
                                <p
                                    key={item._id}

                                    onClick={() => handleXuan(item._id)}
                                    className={`addr-p ${item._id === num ? 'addr-p-active' : ''}`}
                                >
                                    {item.title}
                                </p>
                            )
                        })
                    }
                </div>
            </div>

            <Button color='danger' className='delBtn' onClick={addrDel}>删除</Button>
            <Button color='danger' className='btn' onClick={edit}>修改</Button>
        </div>
    )
})
